<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h2>{{title}}</h2>
      <input type="text" v-model="title">
      <button @click="del()">销毁</button>
      <div id="box" ref="box">123</div>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    const vm = new Vue({
        el:"#app",
        data:{
          title:"hello"
        },
        beforeCreate() {
            // console.log(document.getElementById("box"))
            // console.log(this.$refs.box)
            /*备孕*/
            console.log("实例创建之前")
        },
        created() {
            /*怀上了*/
            console.log(this.$refs.box)
            // 数据请求
            console.log("实例创建之后")
        },
        beforeMount() {
            /*快生了*/
            // console.log(this.$refs.box)
            console.log("挂载到页面之前")
        },
        mounted() {
            /*生了*/
            console.log(this.$refs.box)
            // 数据请求，DOM操作，监听滚动事件...
            console.log("挂载到页面之后")
        },
        beforeUpdate() {
            /*快长大了*/
            console.log("数据更新之前")
        },
        updated() {
            /*长大了*/
            // DOM操作，实例化的操作...
            console.log("数据更新之后")
        },
        beforeDestroy() {
            /*要挂了*/
            // 取消数据订阅
            console.log("实例销毁之前")
        },
        destroyed() {
            /*挂了*/
            console.log("实例销毁之后")
        },
        methods:{
          del(){
            this.$destroy();
          }
        }
    })
  </script>
</html>
